<template>
  <div class="myco">
    <div>
      <div class="main" v-for="(item, index) in arr" :key="item.housesid">
        <radio-group v-if="flag == true">
          <radio
            color="#fd7aa6"
            :checked="item.badgepay"
            :data-index="index"
            @tap="changeCheck"
          />
        </radio-group>
        <div class="left">
          <navigator
            :url="`../purchase/purchase?title=${item.housetitle}&img=${item.imgurl}&bedroom=${item.bedroom}&sqname=${item.sqname}&heading=${item.heading}&livingroom=${item.livingroom}&toilet=${item.toilet}&buildarea=${item.buildarea}&qyname=${item.qyname}`"
          >
            <img :src="item.imgurl" alt="" />
          </navigator>
          <span>{{ item.housetag }}</span>
        </div>
        <div class="right">
          <p>{{ item.housetitle }}</p>
          <div class="miao">
            <span
              >{{ item.bedroom }}室{{ item.livingroom }}厅{{
                item.toilet
              }}卫</span
            >
            <span>{{ item.buildarea }}m²</span>
            <span>{{ item.heading }}</span>
            <span>{{ item.qyname }}</span>
            <span>{{ item.sqname }}</span>
          </div>
          <p>
            <span class="price">{{ item.price }}万</span>
          </p>
          <div class="tag">
            <span v-for="(ite, index) in item.tagwall" :key="index">{{
              ite
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <span v-if="flag == false" @click="changeFlagTrue()">编辑</span>
      <div v-else-if="flag == true" class="footer_true">
        <p>
          <radio
            color="#fd7aa6"
            :checked="checkAll"
            @tap="changeCheckAll"
          />全选
        </p>
        <span @click="changeFlagFalse()">取消</span>
        <button @click="del">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCollection } from "../../server";
export default {
  data() {
    return {
      myCollectionList: [],
      flag: false,
      checkAll: false,
      checkOne: false,
      arr: [],
    };
  },
  async onShow() {
    let result = await getCollection();
    this.myCollectionList = result.data.list;
    console.log(this.myCollectionList, "1111111");
    this.myCollectionList.map((item) => {
      this.arr.push(Object.assign({}, item, { badgepay: false }));
    });
    console.log(this.arr);
    //进页面改变数据状态
    this.arr.map((item) => {
      item.badgepay = false;
    });
  },
  methods: {
    //全选--删除--取消
    changeFlagTrue() {
      this.flag = true;
    },
    //编辑
    changeFlagFalse() {
      this.flag = false;
      this.arr.map((item) => {
        item.badgepay = false;
      });
      this.checkAll = false;
    },
    //反选
    changeCheck(e) {
      let dataList = this.arr;
      let thisIndex = e.currentTarget.dataset.index;
      dataList.forEach((item, index) => {
        if (thisIndex == index) {
          item.badgepay = !item.badgepay;
        }
      });
      this.checkAll = dataList.every((item) => {
        return item.badgepay;
      });
    },
    //全选
    changeCheckAll(e) {
      this.checkAll = !this.checkAll;
      let dataList = this.arr;
      dataList.forEach((item) => {
        item.badgepay = this.checkAll;
      });
    },
    //删除
    del() {
      this.arr = this.arr.filter((item) => {
        return item.badgepay == false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myco {
  width: 100%;
  height: 100%;
  .kong {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
  }

  .main {
    display: flex;
    padding: 20rpx;
    .left {
      display: flex;
      flex-direction: column;
      span {
        font-size: 24rpx;
        position: relative;
        bottom: 240rpx;
        background: rgb(250, 235, 25);
        width: 60rpx;
      }
      img {
        width: 240rpx;
        height: 240rpx;
        border-radius: 10rpx;
      }
    }
    .right {
      margin-left: 20rpx;
      width: 60%;
      height: 100%;
      p {
        font-size: 30rpx;
        font-weight: 600;
      }
      .miao {
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        span {
          font-size: 24rpx;
          color: #666;
          padding: 0 4rpx;
        }
      }
      .price {
           margin-bottom: 10rpx;
        font-weight: 600;
        color: #ff9900;
      }
      .tag {
        > span {
          font-size: 24rpx;
          color: #666;
          padding: 0 4rpx;
          margin: 0 4rpx;
          background: #eee;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    line-height: 120rpx;
    span {
      margin-left: 350rpx;
      font-size: 40rpx;
    }
    .footer_true {
      width: 100%;
      height: 100%;
      display: flex;
      span {
        font-size: 30rpx;
      }
      button {
        //   width: 200rpx;
        height: 80rpx;
        background-color: red;
        color: #fff;
        border: none;
        outline: none;
        line-height: 80rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>